<template>
	<div class="category">
		<ul class="title-ul">
			<li v-for="item in tabs" :key='item.id' :class="{'default':iscur===item.id}" @click="iscur=item.id">
				{{item.name}}
				<span  class="default-span"></span>
			</li>
		</ul>
<<<<<<< HEAD
		<CategoryTab1 v-if='iscur===1'></CategoryTab1>
=======
		<CategoryTab1 v-if='iscur===1' ></CategoryTab1>
>>>>>>> d0d9ac1 (首页)
		<CategoryTabs2 v-if='iscur===2'></CategoryTabs2>
		<div class="cate-bottom">
			<input  type="button" value="加载更多>"/>
		</div>
	</div>
</template>

<script>
	import CategoryTab1 from './CategoryTab1.vue'
	
	import CategoryTabs2 from './CategoryTabs2.vue'
	
	export default{
		name:'Category',
<<<<<<< HEAD
=======
		// props:['propscate'],
		// data(){
		// 	return{
		// 		CateTabsone:[],
		// 		CateTabstwo:[],
		// 	}
		// },
>>>>>>> d0d9ac1 (首页)
		components:{
			CategoryTab1,
			CategoryTabs2
		},
		data(){
			return{
				tabs:[
					{id:1,name:'热门度假'},
					{id:2,name:'热门景点'}
				],
				iscur:1,//默认选中第一个标题第一个组件
			}
<<<<<<< HEAD
		}
=======
		},
		// created() {
		// 	let that=this
		// 	this.axios.get("http://localhost:8080/api/dataHome.json").then((res)=>{
		// 		let data=res.data.Homemsg[0]
		// 		that.CateTabsone=data.CategoryVue;
		// 		that.CateTabstwo=data.CategoryVue;
		// 	}).catch((error)=>{
		// 		console.log(error)
		// 	})
		// },
		// watch:{
		// 	propscate(){
		// 		this.tabs=this.propscate.category_tabs
		// 	}
		// }
>>>>>>> d0d9ac1 (首页)
	}
</script>

<style scoped>
	.category{
		width: 90%;
		margin: 0.5rem auto;
		height: 10.3rem;
	}
	.category .title-ul{
		height: 1.17rem;
		background-color: #eeeeee;
		width: 100%;
		border-radius: 0.3rem;
		display: flex;
		align-items: center;
	}
	.category .title-ul li{
		width: 50%;
		text-align: center;
		line-height: 1.17rem;
		font-size: 0.35rem;
		font-weight: bold;
		position: relative;
	}
	.category .title-ul .default{
		background-color: white;
		border-radius: 0.3rem;
		box-shadow: 0px 0px 3px inset;
	}
	.category .title-ul .default .default-span{
		display: block;
		background-color: gold;
		height: 0.1rem;
		width: 1rem;
		position: absolute;
		left: 39%;
		bottom: 10%;
	}
	.category .cate-bottom{
		width: 100%;
		height: 1rem;
		background-color: white;
	}
	.category .cate-bottom input{
		width: 95%;
		height: 95%;
		border: none;
		border: 1px solid gainsboro;
		border-radius: 0.2rem;
		text-align: center;
		margin-left: 0.5rem;
		background-color: white;
	}
</style>
